import { Card, Col, Row } from 'antd';

import React, { Suspense } from 'react';

import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';

const styles = {
  mainTitle: {
    fontSize: 20,
    color: 'black',
    textAlign: 'left',
  },
  subTitle: {
    fontSize: 16,
    color: 'gray',
    textAlign: 'center',
  },
};

const DetailChart = ({ value, alarmValue, timeLine }) => {
  const stateOne = {
    option: {
      animation: false,
      title: {
        left: 'left',
        text: 'CPU告警',
      },
      legend: {
        data: ['CPU当前值', 'CPU告警阀值'],
      },
      tooltip: {
        trigger: 'axis',
        formatter(params) {
          const paramValue = params[0];
          const paramAlarm = params[1];
          let message = '';
          if (paramValue && paramAlarm) {
            message = [
              `${paramValue.value[0]}`,
              `CPU当前值:${paramValue.value[1]}%`,
              `CPU告警阀值:${paramAlarm.value[1]}%`,
            ].join('<br/>');
          }
          return message;
        },
        axisPointer: {
          type: 'line',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      toolbox: {
        left: 'center',
        itemSize: 25,
        top: 55,
        feature: {
          dataZoom: {
            yAxisIndex: 'none',
          },
          restore: {},
        },
      },
      xAxis: {
        type: 'time',
        // boundaryGap: [0, 0],
        axisPointer: {
          value: '2016-10-7',
          snap: true,
          lineStyle: {
            color: '#004E52',
            opacity: 0.5,
            width: 2,
          },
          label: {
            show: true,
            formatter(params) {
              return echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', params.value);
            },
            backgroundColor: '#004E52',
          },
          handle: {
            show: true,
            color: '#004E52',
          },
        },
        splitLine: {
          show: false,
        },
      },
      yAxis: {
        type: 'value',
        axisTick: {
          inside: true,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          inside: true,
          formatter: '{value}\n',
        },
        z: 10,
      },
      grid: {
        top: 110,
        left: 20,
        right: 20,
        height: 400,
      },
      dataZoom: [
        {
          type: 'inside',
          throttle: 50,
        },
      ],
      series: [
        {
          name: 'CPU当前值',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          sampling: 'average',
          itemStyle: {
            color: '#d68262',
          },

          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#d68262',
              },
              {
                offset: 1,
                color: '#ffe',
              },
            ]),
          },
          data: value.cpuData,
        },
        {
          name: 'CPU告警阀值',
          type: 'line',
          smooth: true,

          symbol: 'circle',
          symbolSize: 5,
          sampling: 'average',
          itemStyle: {
            color: '#8ec6ad',
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#8ec6ad',
              },
              {
                offset: 1,
                color: '#ffe',
              },
            ]),
          },
          data: alarmValue.cpuAlarm,
        },
        {
          name: '时间轴',
          type: 'line',
          showSymbol: false,
          data: timeLine,
          itemStyle: { normal: { opacity: 0 } },
          lineStyle: { normal: { opacity: 0 } },
        },
      ],
    },
  };

  const stateTwo = {
    option: {
      animation: false,
      title: {
        left: 'left',
        text: '内存告警',
      },
      legend: {
        data: ['内存当前值', '内存告警阀值'],
      },
      tooltip: {
        trigger: 'axis',
        formatter(params) {
          const paramValue = params[0];
          const paramAlarm = params[1];
          let message = '';
          if (paramValue && paramAlarm) {
            message = [
              `${paramValue.value[0]}`,
              `内存当前值:${paramValue.value[1]}%`,
              `内存告警阀值:${paramAlarm.value[1]}%`,
            ].join('<br/>');
          }
          return message;
        },
        axisPointer: {
          type: 'line',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      toolbox: {
        left: 'center',
        itemSize: 25,
        top: 55,
        feature: {
          dataZoom: {
            yAxisIndex: 'none',
          },
          restore: {},
        },
      },
      xAxis: {
        type: 'time',
        // boundaryGap: [0, 0],
        axisPointer: {
          value: '2016-10-7',
          snap: true,
          lineStyle: {
            color: '#004E52',
            opacity: 0.5,
            width: 2,
          },
          label: {
            show: true,
            formatter(params) {
              return echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', params.value);
            },
            backgroundColor: '#004E52',
          },
          handle: {
            show: true,
            color: '#004E52',
          },
        },
        splitLine: {
          show: false,
        },
      },
      yAxis: {
        type: 'value',
        axisTick: {
          inside: true,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          inside: true,
          formatter: '{value}\n',
        },
        z: 10,
      },
      grid: {
        top: 110,
        left: 20,
        right: 20,
        height: 400,
      },
      dataZoom: [
        {
          type: 'inside',
          throttle: 50,
        },
      ],
      series: [
        {
          name: '内存当前值',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          sampling: 'average',
          itemStyle: {
            color: '#d68262',
          },

          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#d68262',
              },
              {
                offset: 1,
                color: '#ffe',
              },
            ]),
          },
          data: value.memoryData,
        },
        {
          name: '内存告警阀值',
          type: 'line',
          smooth: true,

          symbol: 'circle',
          symbolSize: 5,
          sampling: 'average',
          itemStyle: {
            color: '#8ec6ad',
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#8ec6ad',
              },
              {
                offset: 1,
                color: '#ffe',
              },
            ]),
          },
          data: alarmValue.memoryAlarm,
        },
        {
          name: '时间轴',
          type: 'line',
          showSymbol: false,
          data: timeLine,
          itemStyle: { normal: { opacity: 0 } },
          lineStyle: { normal: { opacity: 0 } },
        },
      ],
    },
  };

  const stateThree = {
    option: {
      animation: false,
      title: {
        left: 'left',
        text: '网络告警',
      },
      legend: {
        data: ['网络当前值', '网络告警阀值'],
      },
      tooltip: {
        trigger: 'axis',
        formatter(params) {
          const paramValue = params[0];
          const paramAlarm = params[1];
          let message = '';
          if (paramValue && paramAlarm) {
            message = [
              `${paramValue.value[0]}`,
              `网络当前值:${paramValue.value[1]}%`,
              `网络告警阀值:${paramAlarm.value[1]}%`,
            ].join('<br/>');
          }
          return message;
        },
        axisPointer: {
          type: 'line',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      toolbox: {
        left: 'center',
        itemSize: 25,
        top: 55,
        feature: {
          dataZoom: {
            yAxisIndex: 'none',
          },
          restore: {},
        },
      },
      xAxis: {
        type: 'time',
        // boundaryGap: [0, 0],
        axisPointer: {
          value: '2016-10-7',
          snap: true,
          lineStyle: {
            color: '#004E52',
            opacity: 0.5,
            width: 2,
          },
          label: {
            show: true,
            formatter(params) {
              return echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', params.value);
            },
            backgroundColor: '#004E52',
          },
          handle: {
            show: true,
            color: '#004E52',
          },
        },
        splitLine: {
          show: false,
        },
      },
      yAxis: {
        type: 'value',
        axisTick: {
          inside: true,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          inside: true,
          formatter: '{value}\n',
        },
        z: 10,
      },
      grid: {
        top: 110,
        left: 20,
        right: 20,
        height: 400,
      },
      dataZoom: [
        {
          type: 'inside',
          throttle: 50,
        },
      ],
      series: [
        {
          name: '网络当前值',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          sampling: 'average',
          itemStyle: {
            color: '#d68262',
          },

          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#d68262',
              },
              {
                offset: 1,
                color: '#ffe',
              },
            ]),
          },
          data: value.netData,
        },
        {
          name: '网络告警阀值',
          type: 'line',
          smooth: true,

          symbol: 'circle',
          symbolSize: 5,
          sampling: 'average',
          itemStyle: {
            color: '#8ec6ad',
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#8ec6ad',
              },
              {
                offset: 1,
                color: '#ffe',
              },
            ]),
          },
          data: alarmValue.netAlarm,
        },
        {
          name: '时间轴',
          type: 'line',
          showSymbol: false,
          data: timeLine,
          itemStyle: { normal: { opacity: 0 } },
          lineStyle: { normal: { opacity: 0 } },
        },
      ],
    },
  };
  return (
    <>
      <Row
        gutter={24}
        style={{
          marginTop: 10,
        }}
      >
        <Col xl={24} lg={24} md={24} sm={24} xs={24}>
          <Suspense fallback={null}>
            <Card
              className={styles.salesCard}
              bordered={false}
              style={{
                height: '650px',
              }}
            >
              <div>
                <ReactEcharts
                  option={stateOne.option}
                  style={{ height: '600px', width: '1200px' }}
                />
              </div>
            </Card>
          </Suspense>
        </Col>
        <Col xl={24} lg={24} md={24} sm={24} xs={24}>
          <Suspense fallback={null}>
            <Card
              className={styles.salesCard}
              bordered={false}
              style={{
                height: '650px',
              }}
            >
              <div>
                <ReactEcharts
                  option={stateTwo.option}
                  style={{ height: '600px', width: '1200px' }}
                />
              </div>
            </Card>
          </Suspense>
        </Col>
        <Col xl={24} lg={24} md={24} sm={24} xs={24}>
          <Suspense fallback={null}>
            <Card
              className={styles.salesCard}
              bordered={false}
              style={{
                height: '650px',
              }}
            >
              <div>
                <ReactEcharts
                  option={stateThree.option}
                  style={{ height: '600px', width: '1200px' }}
                />
              </div>
            </Card>
          </Suspense>
        </Col>
      </Row>
    </>
  );
};

export default DetailChart;
